<template>
  <div ref="container" class="detail-container">
    <div ref="main" :class="['main', (showNav) ? 'has-nav' : 'no-nav']">
      <div v-if="showStep && $slots.step" class="step-container">
        <slot name="step"></slot>
      </div>
      <div v-if="showBtn && $slots.action" class="action">
        <slot name="action"/>
      </div>
      <slot name="main"></slot>
    </div>
    <div v-if="showNav" class="right-container">
      <nav class="nav">
        <slot name="nav"></slot>
      </nav>
    </div>
    <slot/>
  </div>
</template>
<script>
export default {
  name: 'DetailCard',
  props: {
    showStep: {
      type: Boolean,
      default: false
    },
    showBtn: {
      type: Boolean,
      default: false
    },
    showNav: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {}
  },
  computed: {},
  mounted() {
    this.resize()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    scroll(y) {
      this.$refs.main.scrollTop = y
    },
    resize() {
      if (document.documentElement.clientWidth > 1960) {
        const width = (this.$refs.container.clientWidth - 1100) / 2
        this.padding = width
      } else {
        this.padding = ''
        this.fixRight = 38
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../assets/styles/variables.scss";

.detail-container {
  width: 100%;
  height: calc(100vh - 90px);
  padding: 12px;
  background: $base-main-background;

  .main {
    height: 100%;
    overflow: auto;
    margin-bottom: 0;
  }

  .no-nav {
    width: 100%;
  }

  .has-nav {
    width: calc(100% - 236px);
    display: inline-block;
    vertical-align: top;
  }
}


.right-container {
  width: 224px;
  display: inline-block;
  vertical-align: top;
  margin-left: 12px;
}

.step-container {
  padding: 32px 42px 24px;
  box-shadow: 0px 1px 8px 0px rgba(182, 182, 182, 0.28);
  background: #fff;
  margin-bottom: 24px;
}

.action {
  // width: 224px;
  position: sticky;
  top: 0;
  z-index: 99;
  padding: 8px;
  background: #fff;
  text-align: right;
  box-shadow: 0px 1px 8px 0px rgba(182, 182, 182, 0.28);

  .el-button {
    font-size: $base-button-font-size;
    font-weight: 700;
  }
}

::v-deep.nav {
  position: relative;
  width: 224px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 1px 8px 0 rgba(182, 182, 182, 0.28);

  .nav-item {
    height: 44px;
    line-height: 44px;
    padding: 0 14px;
    margin-top: 8px;
    font-size: $base-content-font-size;
    cursor: pointer;
  }

  .is-active {
    color: #fff;
    background: $base-menu-color-active;
    border-radius: 2px;
  }
}
</style>
